<template>
  <div id="create-bug">
    <title2 title="创建bug"></title2>
    <div class="content">
<!--      标题-->
      <div class="row">
        <div>Bug标题</div>
        <div>
          <div style="width:50%">
            <el-input v-model="title" placeholder="请输入内容" show-word-limit maxlength="30"></el-input>
          </div>
        </div>
      </div>
<!--优先级-->
      <div class="row">
        <div>优先级</div>
        <div>
          <el-radio-group v-model="grade">
            <el-radio-button label="低"></el-radio-button>
            <el-radio-button label="中"></el-radio-button>
            <el-radio-button label="高"></el-radio-button>
            <el-radio-button label="严重"></el-radio-button>
            <el-radio-button label="紧急"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
<!--处理人-->
      <div class="row">
        <div>处理人</div>
        <div>
          <el-dropdown @command="chooseHandler" size="medium" split-button type="primary">
            {{ partnerName }}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(p,i) in partners" :key="i" :command="i">{{p.nickName}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
<!-- 描述-->
      <div class="row">
        <div>描述</div>
        <div>
          <div style="width:60%">
            <el-input
              type="textarea" width="40%"
              :autosize="{ minRows: 6, maxRows: 12}"
              placeholder="请输入内容" show-word-limit maxlength="200"
              v-model="description">
            </el-input>
          </div>
        </div>
      </div>
<!--提交和重置按钮-->
      <div class="row">
        <div> </div>
        <div >
          <el-button type="primary" @click="submit" round style="color:white">提交</el-button>
          <el-button type="success" @click="clean" round style="color:white">重置</el-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import title2 from "./title";
import {partnerSimpleInfo,wordToGrade} from "./data/global";
export default {
  name: "CreateBug",
  components:{title2},
  props:["projectId"],
  data(){
    return {
      grade:"低",
      partnerId:'',partnerName:"",
      description:'',
      title:'', partners:[]
    }
  },
  mounted(){
    this.getPartners()
  },
  methods:{
    chooseHandler(index){
      this.partnerName = this.partners[index].nickName
      this.partnerId = this.partners[index].partnerId
    },
    getPartners(){
      // 项目参与者简单信息
      let config = {
        url:"/cbug/project/getProjectPartner",
        method:"post",
        data:{
          token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJle"
        }
      }
      this.partners = partnerSimpleInfo.partners
      // 首个联系人作为默认处理人
      this.partnerName = this.partners[0].nickName
      this.partnerId = this.partners[0].partnerId
    },
    submit(){
      // 等级由中文转换为整型数值
      let grade = wordToGrade(this.grade)
      this.title = this.title.trim()
      this.description = this.description.trim()
      if(!this.title || !this.description){
        alert("标题和描述不能为空")
      }
      else{
        let config = {
          url:"/cbug/bug/create",
          method:"post",
          data:{
            projectId:this.projectId,
            bugGrade:grade,
            bugDescription:this.description,
            partnerId:this.partnerId,
            bugName:this.title
          }
        }
        console.log(config)
      }
    },
    clean(){
      this.title = ''
      this.description = ''
      // 默认处理人是自己本身
      this.partnerName = this.partners[0].nickName
      this.partnerId = this.partners[0].partnerId
      this.grade = '低'
    }
  }
}
</script>

<style scoped>
*{
  color:black;
}
#create-bug{
  width:100%;
}
#create-bug .title{
  border-left: 5px solid #53a8ff;
  color:#409eff;
  padding-left: 10px;
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 10px;
}

/* 表格布局 */
.content .row{
  /*border:1px solid red;*/

  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content > div{
  width:100%;
  padding:10px 0;
}
.content .row >div:first-child{
  width:20%;
  text-align: right;
}
.content .row >div:last-child{
  width:78%;
  text-align: left;
}
</style>
